<template lang="html">
  <div class="successBox">
    <div class="bzBox">
      <el-steps :center="true" :align-center="true" :active="3" finish-status="success">
        <el-step title="买家下单" description="2017-12-12 02:22:20">11</el-step>
        <el-step title="买家付款"></el-step>
        <el-step title="待预约"></el-step>
        <el-step title="预约成功"></el-step>
        <el-step title="交易完成"></el-step>
      </el-steps>
    </div>
    <el-row style="margin:10px 0;">
      <el-col :span="12" style="border-right:1px solid #EEEEEE;">
        <ul class="contentList1">
          <li>订单号：E201705141245122255</li>
          <li>产品类型：景区、预约、人工退款、预约后不可退换</li>
          <li>支付方式：微信安全支付 - 代销</li>
          <li>客户信息：余国普（135 0000 1234）</li>
        </ul>
      </el-col>
      <el-col :span="10" style="text-align:left; padding-left:10px;">
          <span style="font-size:12px; padding-top:5px;">订单状态：正常</span>
      </el-col>
    </el-row>
    <el-row style="background:#F6F6F6; padding:5px;">
      <el-col :span="12" class="text-left">产品名</el-col>
      <el-col :span="2" class="text-left">单价</el-col>
      <el-col :span="2" class="text-left">数量</el-col>
      <el-col :span="3" class="text-left">优惠(元)</el-col>
      <el-col :span="3" class="text-left">实付(元)</el-col>
      <el-col :span="2" class="text-left">状态</el-col>
    </el-row>
    <el-row class="sucList1">
      <el-col :span="12" class="text-left">
        <p style="width:90%;">【239元，乐山广场智选假日酒店+远成水世界亲子套餐】吃住玩一站搞定，美食玩水全网罗，周末出行好轻松！</p>
        <p class="gray" style="width:90%;">有效期:06月16日-06月24日（周五周六） 套餐内容:两大一小（住宿+早餐+水世界成人票2张） 房型:标准双人房</p>
      </el-col>
      <el-col :span="2" class="text-left">
        <p>48</p>
      </el-col>
      <el-col :span="2" class="text-left"><p>x1</p></el-col>
      <el-col :span="3" class="text-left"><p>-4.0</p></el-col>
      <el-col :span="3" class="text-left"><p>44.0</p></el-col>
      <el-col :span="2" class="text-left"><p>已下单</p></el-col>
    </el-row>
    <el-row class="sucList2">
        <el-col :span="12" class="text-left" >
          <span class="text-small">有赞备注</span>
        </el-col>
        <el-col :span="12" class="text-left" style="border-left:1px solid #eee;">
          <ul class="contentList2">
            <li>您的姓名：张金花</li>
            <li>手机号：18212345678</li>
            <li>
              <span>预约到店：</span>
              <el-date-picker
                v-model="date"
                size="mini"
                type="date"
                placeholder="选择日期"
                class="date">
              </el-date-picker>
            </li>
          </ul>
        </el-col>
        <el-button type="success" class="yyBtn" size="small">提交预约</el-button>
    </el-row>
  </div>
</template>

<script>
export default {
  data (){
    return {
      input:'',
      date:''
    }
  }
}
</script>

<style lang="Sass">
  .successBox{
    .bzBox{padding: 30px 20px 10px 20px; border: 1px solid #13CE66; background: #EFF7F3; border-radius: 5px;}
    .contentList1{list-style: none; padding: 5px 0;
      li{font-size: 12px; text-align: left;}
    }
    .contentList2{list-style: none; padding-left: 10px;
      li{ line-height: 22px; font-size: 12px;
        span{ font-size: 12px;}
        .date{display: inline; width: 120px;
          .el-input__inner{display: inline; width: 120px;}
        }
      }
    }
    .sucList1{ margin-top: 10px;
      p{font-size: 12px;}
    }
    .sucList2{ margin-top: 10px; border-top: 1px dashed #95989A; padding-top: 10px; position: relative;
      p{font-size: 12px;}
      .yyBtn{position: absolute; right: 0; bottom: 0;}
    }
    .el-step__main{margin-top: -60px;}
    .el-step__description{margin-top: 35px; width: 70px; text-align: center;}
  }
</style>
